<template>
  <text :class="['fa', iconClass]" :style="iconStyle"></text>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  name: {
    type: String,
    required: true
  },
  size: {
    type: [Number, String],
    default: 16
  },
  color: {
    type: String,
    default: '#000000'
  }
})

const iconClass = computed(() => {
  return `fa-${props.name}`
})

const iconStyle = computed(() => {
  return {
    fontSize: typeof props.size === 'number' ? `${props.size}rpx` : props.size,
    color: props.color
  }
})
</script>

<style lang="scss">
@font-face {
  font-family: 'FontAwesome';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

.fa {
  font-family: 'FontAwesome' !important;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* FontAwesome图标映射 */
.fa-leaf::before { content: "\f06c"; }
.fa-arrow-left::before { content: "\f060"; }
.fa-user::before { content: "\f007"; }
.fa-lock::before { content: "\f023"; }
.fa-shield::before { content: "\f132"; }
.fa-mobile::before { content: "\f10b"; }
.fa-phone::before { content: "\f095"; }
.fa-eye::before { content: "\f06e"; }
.fa-eye-slash::before { content: "\f070"; }
.fa-home::before { content: "\f015"; }
.fa-handshake::before { content: "\f2b5"; }
.fa-list-alt::before { content: "\f022"; }
.fa-bell::before { content: "\f0f3"; }
.fa-cog::before { content: "\f013"; }
.fa-setting::before { content: "\f013"; }
.fa-search::before { content: "\f002"; }
.fa-plus::before { content: "\f067"; }
.fa-comment::before { content: "\f075"; }
.fa-chat::before { content: "\f086"; }
.fa-info-circle::before { content: "\f05a"; }
.fa-bag::before { content: "\f290"; }
.fa-calendar::before { content: "\f073"; }
.fa-clock-o::before { content: "\f017"; }
.fa-clock::before { content: "\f017"; }
.fa-map-marker::before { content: "\f041"; }
.fa-map::before { content: "\f279"; }
.fa-user-circle::before { content: "\f2bd"; }
.fa-account::before { content: "\f007"; }
.fa-account-fill::before { content: "\f007"; }
.fa-arrow-right::before { content: "\f061"; }
.fa-arrow-right-double::before { content: "\f101"; }
.fa-store::before { content: "\f54e"; }
.fa-question-circle::before { content: "\f059"; }
.fa-times::before { content: "\f00d"; }
.fa-check::before { content: "\f00f"; }
.fa-star::before { content: "\f005"; }
.fa-heart::before { content: "\f004"; }
.fa-share::before { content: "\f064"; }
.fa-grid::before { content: "\f00a"; }
.fa-th-large::before { content: "\f009"; }
.fa-tractor::before { content: "\f722"; }
.fa-dollar::before { content: "\f155"; }
.fa-rmb-circle::before { content: "\f156"; }
.fa-car::before { content: "\f1b9"; }
.fa-camera::before { content: "\f030"; }
.fa-flower::before { content: "\f4be"; }
.fa-tree::before { content: "\f1bb"; }
.fa-building::before { content: "\f1ad"; }
.fa-rocket::before { content: "\f135"; }
.fa-cog::before { content: "\f013"; }
.fa-cogs::before { content: "\f085"; }
.fa-truck::before { content: "\f0d1"; }
.fa-users::before { content: "\f0c0"; }
.fa-shopping-cart::before { content: "\f07a"; }
.fa-shopping-basket::before { content: "\f291"; }
.fa-yen-sign::before { content: "\f157"; }
.fa-yen::before { content: "\f157"; }
.fa-th::before { content: "\f00a"; }
.fa-building-o::before { content: "\f0f7"; }
.fa-user-plus::before { content: "\f234"; }
.fa-bullhorn::before { content: "\f0a1"; }
.fa-gift::before { content: "\f06b"; }
.fa-share-alt::before { content: "\f1e0"; }
.fa-star-o::before { content: "\f006"; }
.fa-wechat::before { content: "\f1d7"; }
.fa-file-text-o::before { content: "\f0f6"; }
.fa-th-large::before { content: "\f009"; }
.fa-user-circle::before { content: "\f2bd"; }
.fa-list-alt::before { content: "\f022"; }
.fa-handshake::before { content: "\f2b5"; }
.fa-arrow-right::before { content: "\f061"; }
.fa-comments::before { content: "\f086"; }
.fa-check-circle::before { content: "\f058"; }
.fa-star-half-o::before { content: "\f123"; }
</style>

